<script lang="ts" setup>
import { getMedicalOrderLogistics } from '@/apis/order';
import type { ExpressData } from '@/types/order';
import { onMounted, ref } from 'vue';

// #ifdef H5
import AMapLoader from '@amap/amap-jsapi-loader'
import startImg from '@/static/images/start.png'
import endImg from '@/static/images/end.png'
import carImg from '@/static/images/car.png'
// v2.0 需要配置安全密钥jscode
window._AMapSecurityConfig = {
  securityJsCode: '1226b16ff335c7872c578d719caaad20'
}
// #endif

const props = defineProps<{
  id: string
}>()


// 1. 获取物流相关信息
const expressInfo = ref<ExpressData>({} as ExpressData)
const getExpressInfo = async ()=>{
  if(!props.id) return uni.showToast({title: '没有当前订单id', icon: 'none'})
  const res = await getMedicalOrderLogistics(props.id)
  expressInfo.value = res
  console.log(res);
}


// 2. 加载地图
onMounted(async()=>{
  await getExpressInfo()
  // #ifdef H5
  AMapLoader.load({
    key: '3c14d1e3ff0a1ff674a64d393d0fa6cc',
    version: '2.0'
  }).then((AMap) => {
    // 2.1 使用 Amap 初始化地图
    const map = new AMap.Map("map", { //设置地图容器id
      zoom: 8, //初始化地图级别
      mapStyle: 'amap://styles/whitesmoke', // 设置地图样式
    });

    // 2.2 构造路线导航类
    AMap.plugin('AMap.Driving', () => {
      const driving = new AMap.Driving({
        map: map, // 指定轨迹显示地图实例
        showTraffic: false, // 关闭交通状态
        hideMarkers: true // 关闭路线规划默认 marker 标记
      })


      // 开始位置坐标        
      const start = expressInfo.value?.logisticsInfo.shift()
      // 结束位置坐标
      const end = expressInfo.value?.logisticsInfo.pop()
      // 处理途经点
      const waypoints = expressInfo.value?.logisticsInfo.map(item => {
        return [item.longitude, item.latitude]
      })

      // 绘制起点和终点
      const startMarker = new AMap.Marker({
        icon: startImg, // 设置自定义图片
        position: [start?.longitude, start?.latitude], // 图片显示的坐标位置
        anchor: 'top-center',
        offset: [0, -60]
      })

      const endMarker = new AMap.Marker({
        icon: endImg, // 设置自定义图片
        position: [end?.longitude, end?.latitude], // 图片显示的坐标位置
        anchor: 'top-center',
        offset: [0, -60]
      })

      map.add(startMarker)
      map.add(endMarker)



      driving.search([start?.longitude, start?.latitude], [end?.longitude, end?.latitude], { waypoints: waypoints }, function (status: string, result: object) {
        const carMarker = new AMap.Marker({
            icon: carImg,
            position: [
              expressInfo.value?.currentLocationInfo.longitude,
              expressInfo.value?.currentLocationInfo.latitude
            ],
            anchor: 'center' // 设置基于坐标点显示的位置
        })
         map.add(carMarker)

         // 3s之后
         setTimeout(()=>{
           map.setFitView([carMarker])
           map.setZoom(12)
         }, 3000)
      })
    })
  })
  // #endif
})

</script>

<template>
  <view class="timeline-page">
    <!-- 加载地图 -->
    <view id="map" class="uni-map"></view>
    <!--  end -->
    <cover-view class="timeline-meta">
      <cover-view class="status">{{ expressInfo.statusValue }}</cover-view>
      <cover-view class="extra">
        预计 {{ expressInfo.estimatedTime }} 送达 {{ expressInfo.name }} {{ expressInfo.awbNo }}
      </cover-view>
    </cover-view>
    <view class="timeline-detail">
      <view class="title">物流详情</view>
      <view class="timeline">
        <view class="line">
          <view class="badge text">收</view>
          <view class="content">
            收货地址:广东省广州市大华区明离路科技园880号
          </view>
        </view>
        <view class="line" v-for="(item, index) in expressInfo.list">
          <view class="badge dot" v-if="item.status <= 3"></view>
          <view class="badge icon" v-if="item.status === 4">
            <uni-icons color="#2cb5a5" custom-prefix="iconfont" type="icon-truck" />
          </view>
          <view class="badge icon" v-if="item.status === 5">
            <uni-icons color="#2cb5a5" custom-prefix="iconfont" type="icon-checked" />
          </view>
          <view class="label">{{ item.statusValue }}</view>
          <view class="content">
            {{ item.content }}
          </view>
          <view class="time">{{ item.createTime }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>